/*
 * @name:
 * @author: wuxd
 * @Date: 2021-01-19 16:17:47
 * @LastEditTime: 2021-04-20 11:44:02
 */
/**
 * @Name:  PDFView
 * @Author:
 * @Desc:  react 下使用react-pdf-js预览pdf
 * @Date: 2021-01-19 16:17:50
 */
import React from "react";
import ReactPdfJs from "react-pdf-js";
import testpdf from "@/assets/NodeDevelopGuide.pdf";

import styles from "./styles.module.less";
class PDFView extends React.Component {
  state = {};

  onDocumentComplete = (pages) => {
    this.setState({ page: 1, pages });
  };

  handlePrevious = () => {
    this.setState({ page: this.state.page - 1 });
  };

  handleNext = () => {
    this.setState({ page: this.state.page + 1 });
  };

  renderPagination = (page, pages) => {
    let previousButton = (
      <li className="previous" onClick={this.handlePrevious}>
        <a href="#">
          <i className="fa fa-arrow-left"></i> 上一页
        </a>
      </li>
    );
    if (page === 1) {
      previousButton = (
        <li className="previous disabled" style={{ cursor: "no-drop" }}>
          <a href="#">
            <i className="fa fa-arrow-left"></i> 上一页
          </a>
        </li>
      );
    }
    let nextButton = (
      <li className="next" onClick={this.handleNext}>
        <a href="#">
          下一页 <i className="fa fa-arrow-right"></i>
        </a>
      </li>
    );
    if (page === pages) {
      nextButton = (
        <li className="next disabled">
          <a href="#">
            下一页 <i className="fa fa-arrow-right"></i>
          </a>
        </li>
      );
    }
    return (
      <nav>
        <ul className="pager">
          {previousButton}
          {nextButton}
        </ul>
      </nav>
    );
  };

  render() {
    let pagination = null;
    if (this.state.pages) {
      pagination = this.renderPagination(this.state.page, this.state.pages);
    }
    return (
      <div>
        <ReactPdfJs file={testpdf} onDocumentComplete={this.onDocumentComplete} page={this.state.page} />
        {pagination}
      </div>
    );
  }
}
export default PDFView;
